<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>validatebox</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>ValidateBox</h3>
<p>Override defaults with $.fn.validatebox.defaults.</p>
<p>
The validatebox is designed to validate the form input fields.
If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message.
The validatebox can be integrated with form plugin and will prevent invalid fields from submission.
</p>
<img src="images/validatebox.png">

<h4>Usage</h4>
<p>Create validatebox from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"vv"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"required:true,validType:'email'"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;">	&lt;input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /&gt;
</textarea>
<p>Create validatebox using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"vv"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;">	&lt;input id="vv" /&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#vv'</span><span>).validatebox({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;<span class="keyword">true</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;validType:&nbsp;<span class="string">'email'</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;">	$('#vv').validatebox({
		required: true,
		validType: 'email'
	});
</textarea>
<p>To check password and retype password are same.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="comment">//&nbsp;extend&nbsp;the&nbsp;'equals'&nbsp;rule</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>$.extend($.fn.validatebox.defaults.rules,&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;equals:&nbsp;{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validator:&nbsp;<span class="keyword">function</span><span>(value,param){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>&nbsp;value&nbsp;==&nbsp;$(param[0]).val();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;<span class="string">'Field&nbsp;do&nbsp;not&nbsp;match.'</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;">	// extend the 'equals' rule
	$.extend($.fn.validatebox.defaults.rules, {
		equals: {
			validator: function(value,param){
				return value == $(param[0]).val();
			},
			message: 'Field do not match.'
		}
	});
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"pwd"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"pwd"</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"required:true"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"rpwd"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"rpwd"</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span>&nbsp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">required</span><span>=</span><span class="attribute-value">"required"</span><span>&nbsp;</span><span class="attribute">validType</span><span>=</span><span class="attribute-value">"equals['#pwd']"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;">	&lt;input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /&gt;
	&lt;input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" 
		required="required" validType="equals['#pwd']" /&gt;
</textarea>

<br>
<h4>Validate Rule</h4>
<p>The validate rule is defined by using required and validType property, here are the rules already implemented:</p>
<ul>
	<li>email: Match email regex rule.</li>
	<li>url: Match URL regex rule.</li>
	<li>length[0,100]: Between x and x characters allowed.</li>
	<li>remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.</li>
</ul>
<p>To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. 
For example, to define a minLength valid type:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$.extend($.fn.validatebox.defaults.rules,&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;minLength:&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validator:&nbsp;<span class="keyword">function</span><span>(value,&nbsp;param){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>&nbsp;value.length&nbsp;&gt;=&nbsp;param[0];&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;<span class="string">'Please&nbsp;enter&nbsp;at&nbsp;least&nbsp;{0}&nbsp;characters.'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;">	$.extend($.fn.validatebox.defaults.rules, {
		minLength: {
			validator: function(value, param){
				return value.length &gt;= param[0];
			},
			message: 'Please enter at least {0} characters.'
		}
	});
</textarea>

<p>Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"validType:'minLength[5]'"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;">	&lt;input class="easyui-validatebox" data-options="validType:'minLength[5]'"&gt;
</textarea>

<br>
<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>required</td>
<td>boolean</td>
<td>Defines if the field should be inputed.</td>

<td>false</td>
</tr>
<tr>
<td>validType</td>
<td>string</td>
<td>Defines the field valid type, such as email, url, etc.</td>
<td>null</td>
</tr>
<tr>
<td>missingMessage</td>
<td>string</td>

<td>Tooltip text that appears when the text box is empty.</td>
<td>This field is required.</td>
</tr>
<tr>
<td>invalidMessage</td>
<td>string</td>
<td>Tooltip text that appears when the content of text box is invalid.</td>
<td>null</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>

<td>destroy</td>
<td>none</td>
<td>Remove and destroy the component.</td>
</tr>
<tr>
<td>validate</td>
<td>none</td>
<td>Do the validation to determine whether the content of text box is valid.</td>
</tr>
<tr>
<td>isValid</td>

<td>none</td>
<td>Call validate method and return the validation result, true or false.</td>
</tr>
</tbody></table>

</div>
</body>
</html>